<template>
  <div class="detail-footer border-top-1px">
    <div class="icon">
      <div class="home" @click="$router.push('/')">
        <i class="cubeic-home"></i>
        <span>首页</span>
      </div>
      <div class="fav" @click="actionFav">
        <i class="cubeic-like" :class="{'active' : isFav}"></i>
        <span>收藏</span>
      </div>
      <div class="cart" @click="$router.push('/cart')">
        <i class="cubeic-mall"></i>
        <span>购物车</span>
        <b v-if="$store.getters['ExecCart/total'] > 0">{{ $store.getters['ExecCart/showTotal'] }}</b>
      </div>
    </div>
    <div class="button">
      <template v-if="!detail.isGroup">
        <span class="cart" @click="addCart">加入购物车</span>
        <span class="buy" @click="buy">立即购买</span>
      </template>
      <template v-else>
        <span class="cart" @click="createGroup">发起拼团</span>
        <span class="buy" @click="randomGroup" v-if="!$route.params.group">随机拼团</span>
        <span class="buy" @click="joinGroup" v-else>参与此团</span>
      </template>
    </div>
  </div>
</template>

<script>
import api from '@/api'
import base64 from '@/util/base64'
export default {
  name: 'DetailFooter',
  props: ['detail'],
  computed: {
    haveSku() {
      return this.detail.sku && this.detail.sku.length > 0 && this.detail.skuName && this.detail.skuName.length > 0
    }
  },
  data() {
    return {
      isFav: false
    }
  },
  methods: {
    /**
     * check is login
     * @returns {Promise<unknown>}
     */
    checkLogin(isFav = false) {
      return new Promise(resolve => {
        api.Exec.isLogin().then(response => {
          let { data } = response
          data = base64.parse(data)
          if (data.isLogin) {
            resolve()
          } else {
            if (!isFav) {
              return this.$createDialog({
                type: 'confirm',
                content: '登录过期,是否重新登录',
                onConfirm: () => {
                  this.$router.push('/user/login')
                }
              }).show()
            }
          }
        })
      })
    },
    checkFav() {
      this.checkLogin(true).then(() => {
        // Warn:
        // not wait props detail
        const id = this.$route.params.id
        // const id = this.detail.id
        api.Exec.checkFavorite({ id }).then(response => {
          let { data } = response
          data = base64.parse(data)
          this.isFav = !!data.is
        })
      })
    },
    actionFav() {
      this.checkLogin().then(() => {
        const id = this.detail.id
        if (!this.isFav) {
          api.Exec.createFav({ id }).then(() => {
            this.$createToast({
              type: 'correct',
              txt: '收藏成功',
              time: 500
            }).show()
            this.isFav = true
          })
        } else {
          api.Exec.removeFav({ id }).then(() => {
            this.$createToast({
              type: 'correct',
              txt: '取消成功',
              time: 500
            }).show()
            this.isFav = false
          })
        }
      })
    },
    addCart() {
      this.checkLogin().then(() => {
        // sku
        if (this.haveSku) {
          this.$emit('openPop', 1)
        } else {
          const stock = +this.detail.stock
          if (stock < 1) {
            return this.$createToast({
              type: 'correct',
              txt: '库存不足',
              time: 500
            }).show()
          }
          this.$emit('addCart')
        }
      })
    },
    buy() {
      this.checkLogin().then(() => {
        // sku
        if (this.haveSku) {
          this.$emit('openPop', 2)
        } else {
          const stock = +this.detail.stock
          if (stock < 1) {
            return this.$createToast({
              type: 'correct',
              txt: '库存不足',
              time: 500
            }).show()
          }
          this.$emit('buy')
        }
      })
    },
    createGroup() {
      this.checkLogin().then(() => {
        // sku
        if (this.haveSku) {
          this.$emit('openPop', 3)
        } else {
          const stock = +this.detail.stock
          if (stock < 1) {
            return this.$createToast({
              type: 'correct',
              txt: '库存不足',
              time: 500
            }).show()
          }
          this.$emit('createGroup')
        }
      })
    },
    joinGroup() {
      this.checkLogin().then(() => {
        // sku
        if (this.haveSku) {
          this.$emit('openPop', 4)
        } else {
          const stock = +this.detail.stock
          if (stock < 1) {
            return this.$createToast({
              type: 'correct',
              txt: '库存不足',
              time: 500
            }).show()
          }
          this.$emit('joinGroup')
        }
      })
    },
    randomGroup() {
      this.checkLogin().then(() => {
        // sku
        if (this.haveSku) {
          this.$emit('openPop', 5)
        } else {
          const stock = +this.detail.stock
          if (stock < 1) {
            return this.$createToast({
              type: 'correct',
              txt: '库存不足',
              time: 500
            }).show()
          }
          this.$emit('randomGroup')
        }
      })
    }
  },
  created () {
    // this.checkFav()
  },
  activated () {
    this.checkFav()
  },
  deactivated () {
    // this.isFav = false
  }
}
</script>

<style scoped lang="stylus">
// 按钮颜色
//$color = #a1c557
$color = $main_color

.detail-footer
  position fixed
  width 100%
  height 55px
  left 0
  bottom 0
  display flex
  background white
  padding 7.5px 20px
  box-sizing border-box
  .icon
    flex 1
    display flex
    justify-content space-between
    padding 5px 15px
    div
      i, span
        display block
        color $second_text_color
      i
        font-size 16px
        margin-bottom 2px
        &.active
          color $main_color
      b
        position absolute
        display inline-block
        min-width 20px
        height 20px
        line-height 20px
        border-radius 50%
        margin-top -45px
        margin-left 0px
        background $main_color
        color white
        font-weight 700
        opacity 0.75
        padding 1.5px
        font-style normal
  .button
    flex 1.8
    display flex
    padding-top 2.5px
    span
      flex 1
      height 35px
      line-height 35px
      font-size 14px
      font-weight 700
      box-sizing border-box
      letter-spacing 1px
      &.cart
        border 1px solid $color
        color $color
        border-top-left-radius 15px
        border-bottom-left-radius 15px
      &.buy
        background $color
        color white
        border-top-right-radius 15px
        border-bottom-right-radius 15px
      &.free
        border-top-left-radius 15px
        border-bottom-left-radius 15px
</style>
